<template>
  <el-dialog
    title=""
    :visible.sync="dialogShow"
    :before-close="handleClose"
    center
  >
    <div>
      {{ loadedRatio }}  {{ curPageNum }}/{{ pageTotalNum }} 
      <el-progress :percentage="(loadedRatio*100)" v-if="progressShow"></el-progress>
      <div v-loading="loading" element-loading-text="拼命加载中..." class="loadingBox" v-if="loading">
        
      </div>
      <!-- <div v-if="pageTotalNum >0">
        <pdf
          ref="pdf"
          :src="pdfurl"
          :page="i"
          v-for="i in pageTotalNum"
          :key="i"
          :rotate="pageRotate"
          @progress="loadedRatio = $event"
          @page-loaded="pageLoaded($event)"
          @num-pages="numPages = $event"
          @error="pdfError($event)"
          @link-clicked="page = $event"
        >
        </pdf>
      </div> -->
     
      <!-- <div v-if="pageTotalNum > 50">
        <pdf
          ref="pdf"
          :src="pdfurl"
          :page="curPageNum"
          :rotate="pageRotate"
          @progress="loadedRatio = $event"
          @loaded="loaded($event)"
          @num-pages="getNumPage"
          @page-loaded="pageLoaded($event)"
          @error="pdfError($event)"
          @link-clicked="page = $event"
        >
        </pdf>
        <span slot="footer" class="dialog-footer">
      <el-button @click.stop="prePage" class="mr10"> 上一页</el-button>
      <el-button @click.stop="nextPage" class="mr10"> 下一页</el-button>
      <span style="padding:0 20px">{{ curPageNum }}/{{ pageTotalNum }} </span>
      <el-button @click.stop="clock" class="mr10"> 顺时针</el-button>
      <el-button @click.stop="counterClock" class="mr10"> 逆时针</el-button>
    </span>
      </div> -->
      
    </div>
  
  </el-dialog>
</template>

<script>
import pdf from "vue-pdf";
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  components: {
    pdf,
  },
  props: {
    dialogShow: {
      typeof: Boolean,
      default: false,
    },
    pdfurl: {
      typeof: String,
      default: "",
    },
  },
  data() {
    return {
      pageRotate: 0,
      pageTotalNum: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 1,
      loading:true,
      progressShow:true,


    
    };
  },
  watch: {
    dialogShow(value) {
      if (value) this.getNumPage()
    },
    loadedRatio(val){
      if(val==1){
        this.loading=false;
        this.progressShow=false
      }
    }
  },
 
  methods: {
    loaded(e){
      console.log(e);
    },
    handleClose() {
      this.loading=true;this.progressShow=true;this.loadedRatio=0;this.curPageNum=0
      this.$emit("handleClose");
    },
    // 上一页函数，
    prePage() {
      var page = this.curPageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.curPageNum = page;
    },
    // 下一页函数
    nextPage() {
      var page = this.curPageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.curPageNum = page;
    },
    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90;
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90;
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e;
    },
    // 其他的一些回调函数。
    pdfError(error) {
      this.$message.error('文件太大 加载失败')
      console.error(error);
    },
    getNumPage() {
        console.log(this.pdfurl);
      let pdfSrc = pdf.createLoadingTask(
        { url: this.pdfurl, CMapReaderFactory },
      );
      
      pdfSrc.promise
        .then((res) => {
          console.log(res); // 用个定时器解决报错Rendering cancelled
            var timer = setInterval(() => {
              this.currentNum += 1
              if (this.currentNum === this.pageTotalNum) {
                clearInterval(timer)
              }
            }, 500)

          this.pageTotalNum = res.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
  },
};
</script>

<style>
.loadingBox{
  height: 500px;
}
.dialog-footer{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>